<template>
  <h4>{{person}}</h4>
  <h2>姓名: {{ name }}</h2>
  <h2>年龄: {{ age }}</h2>
  <h2>薪资: {{ job.j1.salary }}K</h2>

  <button @click="name+='~'">修改名字</button>
  <button @click="age++">修改年龄</button>
  <button @click="job.j1.salary+=10">修改薪资</button>

</template>

<script>

	import {ref, reactive, toRef, toRefs} from 'vue';

	export default {

		name: "HelloWorld",
    setup() {
			const person = reactive({
				name: '张三',
				age: 18,
				job: {
					j1: {
						salary: 20
					}
				}
			});
      // let name1 = person.name;

      // console.log("#######", name1);
      // let name2 = toRef(person, 'name');
			// console.log("%%%%%%%", name2);
      console.log(person);
      const x = toRefs(person);
			console.log(",,,,,,,,,,", x);

			return {
				person,
				// name: toRef(person, 'name'),
        // age: toRef(person, 'age'),
        // salary: toRef(person.job.j1, 'salary'),
        ...toRefs(person)
      }
    }


  }




</script>
